<template>
  <view class="content">
    <view class="section-0">
      <view class="section-body">
        <view
          class="box1"
          v-for="(item, index) in list"
          :key="index"
        >
          <view style="display: flex">
            <!-- <image
              :src="item.process_photos_path"
              mode="aspectFill"
              class="image"
              v-if="item.process_photos_path != ''"
            ></image> -->
            <u-album  :urls="item.photoList" :keyName="photoList[0]"  class="image"  v-if="item.process_photos_path != ''"  singleSize=80 ></u-album>
            <view class="prompt" v-else-if="item.process_photos_path == ''">
              <view class="promptTop">暂无</view>
              <view class="promptBottom">图片</view>
            </view>

            <view>
              <view class="qutu"
                >区域名称: <span>{{ item.area }}</span></view
              >
              <view class="qutu"
                >样板名称: <span>{{ item.template_name }}</span></view
              >
              <view class="qutu"
                >工序拆分: <span>{{ item.process_split }}</span></view
              >
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { getProjectTemplateRecordApi } from "@/api/statistics.js";
export default {
  data() {
    return {
      id: "",
      name: "",
      list: [],
      photoList:[],
    };
  },
  methods: {
    async getProjectTemplateRecordApi() {
      uni.showLoading({
        mask: true,
      });
      let j = await getProjectTemplateRecordApi({
        template_id: this.id,
      });
      console.log(j.data.data);
      if (j.data.code == 1) {
        this.list = j.data.data;
      }
      this.list.forEach(element => {
       element.photoList = []
      element.photoList.push(element.process_photos_path) 
      });
      console.log( this.list,999);
      uni.hideLoading();
    },
    go(item) {
      uni.navigateTo({
        url: "demolistdetails?id=" + item.id,
      });
    },
  },
  onLoad(e) {
    this.id = e.id;
    this.getProjectTemplateRecordApi();
    // location.reload()
  },
};
</script>

<style lang="scss" scoped>
.content {
  background-color: #fafbfd;
}
.section-0 {
  width: 100%;
  background-color: #3a5df5;
  .section-body {
    width: 100%;
    padding-left: 40rpx;
    padding-right: 40rpx;
    padding-bottom: 50rpx;
    padding-top: 50rpx;
    background-color: #ffffff;
    background-size: cover;
    background-repeat: no-repeat;
    border-top-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
    overflow: hidden;
    box-sizing: border-box;
    .box {
      width: 100%;
      border-radius: 30rpx;
      box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
      margin-top: 20rpx;
      .name {
        font-size: 30rpx;
        color: #3664ff;
        font-weight: bold;
        padding: 20rpx 0 20rpx 40rpx;
      }
      .body {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
        background-color: #efefef;
        margin-bottom: 20rpx;
        @include clear;
        height: 288rpx;
        overflow-y: auto;
        .item {
          width: auto;
          height: 60rpx;
          @include clear();
          .name {
            float: left;
            width: calc(100% - 24rpx - 40rpx);
            font-size: 26rpx;
            font-weight: 300;
            padding: 15rpx 0;
            font-stretch: normal;
            line-height: 30rpx;
            font-stretch: normal;
            color: #827f82;
            letter-spacing: 1px;
            margin-left: 20rpx;
          }
        }
      }
    }
    .box1 {
      width: 100%;
      border-radius: 30rpx;
      box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
      margin-top: 20rpx;
      padding-left: 20rpx;
      .image {
        width: 158rpx;
        padding: 24rpx;
        margin-right: 20rpx;
      }
      .edit {
        color: #0535d6;
        margin-left: 6rpx;
        margin-top: 29rpx;
      }
      .prompt {
        background: #efefef;
        width: 158rpx;
        height: 158rpx;
        margin-top: 23rpx;
        border-radius: 13rpx;
        margin-right: 45rpx;
        margin-left: 15rpx;
        margin-bottom: 23rpx;

        .promptTop {
          font-size: 40rpx;
          color: #b8b8b8;
          text-align: center;
          margin-top: 22rpx;
        }
        .promptBottom {
          font-size: 40rpx;
          color: #b8b8b8;
          margin-top: 6rpx;
          text-align: center;
        }
      }
      .qutu {
        width: 384rpx;
        font-size: 26rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #5b5b5e;
        margin: 26rpx 0 0 0;
      }
      .qutu span {
        color: #a3a3a3;
        margin-left: 20rpx;
      }
    }
  }
}
</style>
